<template>
	<view class="container">
		<u--form :model="address" ref="add" :errorType="errorType" :rules="rules">
			<view class="increase">
				<!-- 收件人 -->
				<u-form-item label="收件人" labelWidth="70" prop="consignee">
					<u--input v-model="address.consignee" placeholder="请输入收件人" border="none"></u--input>
				</u-form-item>

				<!-- 电话 -->
				<u-form-item label="电话" labelWidth="70" prop="mobile">
					<u--input v-model="address.mobile" placeholder="请输入电话" border="none"></u--input>
				</u-form-item>
				
				<!-- 地区 -->
				<u-form-item label='地区' labelWidth="70" prop='region_text' @click="RegionShow = true">
					<pick-regions :defaultRegion="address.region" @getRegion="handleGetRegion">
						<u--input v-model="address.region_text" disabled disabledColor="#ffffff" placeholder="请选择地区"
							border="none">
						</u--input>
						<u-icon slot="right" name="arrow-right">
						</u-icon>
					</pick-regions>
				</u-form-item>

				<!-- 详细地址 -->
				<u-form-item label="详细地址" labelWidth="70" prop="address">
					<u--textarea v-model="address.address" placeholder="请输入详细地址" height="70" count="true">
					</u--textarea>
				</u-form-item>

			</view>
			<!-- 按钮 -->
			<view class="btn">
				<u-button @click="submit" class="btn-style" type="primary"  text="添加收货地址"></u-button>
			</view>
		</u--form>
		<!-- 消息提示的组件 -->
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	//引入第三方的地区插件
	import pickRegions from '@/components/pick-regions/pick-regions.vue'
	export default {
		components: {
			pickRegions
		},
		data() {
			return {
				BtnStyle:{
					width:'100%',
					height:'10vh',
					lineHeight:'10vh',
					textAlign:'center',
					fontSize:'14px',
					color:'#fff',
					background:'#158dfb',
					borderRadius:'0px'
				},
				errorType: ['toast'],
				LoginUser: uni.getStorageSync('LoginUser'),
				rules: {
					consignee: [
						{
							required: true,
							message: '请输入姓名',
							trigger: ['change','blur'],
						}
					],
					mobile: [
						{
							required: true,
							message: '请输入手机号码',
							trigger: ['change','blur'],
						},
						{
							validator: (rule, value, callback) => {
								// 上面有说，返回true表示校验通过，返回false表示不通过
								// uni.$u.test.mobile()就是返回true或者false的
								return this.$u.test.mobile(value);
							},
							message: '手机号码不正确',
							// 触发器可以同时用blur和change
							trigger: ['change','blur'],
						}
					],
					region: [
						{
							required: true,
							message: '请选择地区',
							trigger: ['change','blur'],
						}
					],
					address: [
						{
							required: true,
							message: '请输入详细地址',
							trigger: ['change','blur'],
						}
					]
					
				},
				RegionShow: false,
				address:{
					consignee:'',
					mobile:'',
					address:'',
					region_text: '',  //文字结构的地区
					region:[],  //数组结构的地区
					code:null,  //地区码
				}
			}
		},
		methods: {
			async submit(){
				this.$refs.add.validate().then(async (valid) => {
					//没有通过表单验证
					if(!valid)
					{
						//表单没通过，消息提醒
						this.$refs.uToast.show({
							type:'error',
							message: '地址填写有误请仔细检查'
						})
											
						return false
					}
					
					//组装数据
					let data = {
						userid: this.LoginUser.id,
						consignee: this.address.consignee,
						mobile: this.address.mobile,
						address: this.address.address,
						status: 0,
						code: this.address.code
					}
					
					let result = await this.$u.api.user.Addressadd(data)
					if(result.code == '1'){
						this.$refs.uToast.show({
							message: result.msg,
							type: 'success',
							complete: () => {
								uni.navigateTo({
								    url: '/pages/user/address/index'
								});
							}
						})
					} else {
						this.$refs.uToast.show({
							type:'error',
							message: result.msg
						})
											
						return false
					}
					
				})
				.catch(() => {})
			},
			// 切换地址
			handleGetRegion(val){
				let [province, city, district] = val
				var region_text = ''
				var code = null
				var region = []
				if(province){
					region_text +=province.name + '-'
					code = province.code
					region.push(province.name)
				}
				if(city){
					region_text +=city.name + '-'
					code = city.code
					region.push(city.name)
				}
				if(district){
					region_text +=district.name
					code = district.code
					region.push(district.name)
				}
				this.address.region_text = region_text
				this.address.region = region
				this.address.code = code
			}
		}
	}
</script>

<style>
	.container {
		width: 100vw;
		height: 100vh;
		position: relative;
		overflow-x: hidden;
	}

	.increase {
		margin-top: 3vh;
		background: #fff;
		padding: 0vh 2vh;
		text-align: left;
	}

	/* 按钮 */
	.btn {
		position: fixed;
		bottom: 0px;
		width: 100%;
	}

	.add {
		width: 100%;
		height: 10vh;
		line-height: 10vh;
		text-align: center;
		font-size: 14px;
		color: #fff;
		background: #158dfb;
	}
</style>